<template>
	<view id="manager">
		<view class="managerBox">
			<view class="managerList">
			   <view class="title">客户经理</view>
			   <view class="list">
			      <view class="name">
			         <image src="../../static/my/name.png" alt="" />
			         <text>{{khjl.username}}</text>
			      </view>
			      <view class="name" @click="cell(khjl.mobile)">
			         <image src="../../static/my/phone1.png" alt="" />
			         <text>{{khjl.mobile}}</text>
			      </view>
			   </view>
			</view>
			<view class="managerList" v-for="(item,index) in list" :key="index">
			   <view class="title">{{item.title}}</view>
			   <view class="listBox">
			      <view v-for="(item1,index1) in item.data" :key="index1" class="zu" @click="cell(item1.phone)">
			        <text>{{item1.title}}</text><text><image src="../../static/my/phone1.png" alt="" />{{item1.phone}}</text>
			      </view>
			   </view>
			</view>
		</view>
		           
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				khjl:'',
				list:[]
				
			}
		},
		onLoad(){
			this.getManager()
		},
		methods: {
			getManager(){
				this.httpClient.post('agents/app/agent/index/getContact', {}).then(res=>{
					if(res.code==1){
						this.khjl=res.data.khjl
						this.list=res.data.ot
					}
				})
			},
			cell(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#manager{
		 .managerBox{
		  background: #FFFFFF;
		  margin: 0.65rem;
		  padding: 1rem 0;
		  border-radius: 0.65rem;
		}
		.managerBox .managerList:nth-child(2n+1) .title{
		  background: #25a1dc;
		  display: inline-block;
		  color: #FFFFFF;
		  font-size: 0.75rem;
		  height: 2rem;
		  line-height: 2rem;
		  padding: 0 1rem;
		  border-top-right-radius: 0.65rem;
		  border-bottom-right-radius: 0.65rem;
		}
		.managerBox .managerList:nth-child(2n+2) .title{
		  background: #ffa200;
		  display: inline-block;
		  color: #FFFFFF;
		  font-size: 0.75rem;
		  height: 2rem;
		  line-height: 2rem;
		  padding: 0 1rem;
		  border-top-right-radius: 0.65rem;
		  border-bottom-right-radius: 0.65rem;
		}
		.managerList .list{
		  padding: 1rem;
		  display: flex;
		  align-items: center;
		}
		.managerList .name{
		  display: flex;
		  flex: 1;
		  align-items: center;
		}
		.managerList .name:nth-child(1){
		  margin-right: 0.65rem;
		}
		.managerList .name image{
		  width: 1.5rem;
		  height: 1.5rem;
		  margin-right: 0.65rem;
		}
		.managerList .name text{
		  display: inline-block;
		  width: 4.5rem;
		  background: #e4f4fb;
		  padding: 0rem 1rem;
		  border-radius: 0.8rem;
		  font-size: 0.75rem;
		  text-align: center;
		}
		.managerList .listBox{
		  margin: 1rem 2rem;
		  font-size: 0.75rem;
		  border: 1px solid #212121;
		  border-bottom: none;
		}
		.listBox .zu{
		  border-bottom: 1px solid #212121;
		  line-height: 2.5rem;
		  display: flex;
		  align-items: center;
		}
		.listBox{
			align-items: center;
		}
		.listBox .zu text{
		  display: inline-block;
		  flex: 1;
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
		.listBox .zu text:nth-child(1){
		  border-right: 1px solid #212121;
		}
		.listBox  image{
		  width: 1.25rem;
		  height:1.25rem;
		  margin-right: 0.4rem;
		}
	}
	
</style>
